<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    跑步 <input type="checkbox" />
    爬山<input type="checkbox" />
    旅游<input type="checkbox"/>
    <br>
    <button id="all">全选</button>
    <button id="noAll">全不选</button>
    <button id="reverse">反选</button>


    <script>
        //全选
        var allEle = document.getElementById('all')
        var noAllEle = document.getElementById('noAll')
        var reverseEle = document.getElementById('reverse')
         var inputEle = document.getElementsByTagName('input')
        allEle.onclick = function(){
            for(var i = 0; i < inputEle.length;i++){
                inputEle[i].checked = true;
            }
        }
        noAllEle.onclick = function(){
            for(var i = 0; i < inputEle.length;i++){
                inputEle[i].checked = false;
            }
        }
        reverseEle.onclick = function(){
            for(var i = 0; i < inputEle.length;i++){
                inputEle[i].checked = !  inputEle[i].checked
            }
        }


    </script>
    
  </body>
</html>
